<template>
    <div :style="'width:'+width+'px'" class="z-progress" v-if="show">
        <div class="progress-total"></div>
        <div class="Progress-num" style="display: flex;width: 100%">
            <div :style="'width:'+numWidth+'%;background:'+color" :class="num>0&&noNum>0?'set-border-left':'set-border'"></div>
            <div :style="'width:'+noNumWidth+'%;background:'+noColor" :class="num>0&&noNum>0?'set-border-right':'set-border'"></div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "z-progress",
        props: {
            width: {
                type: Number,
                default: 280,
            },
            color: {
                type: String,
                required: true
            },
            total: {
                type: Number,
                required: true,
            },
            num: {
                type: Number,
                required: true,
            },
            noNum: {
                type: Number,
                required: true
            },
            noColor: {
                type: String,
                default: '#6DC789'
            }
        },
        data() {
            return {
                show: true
            }
        },
        mounted() {

        },
        methods: {
            handleShow() {
                this.show = false
                this.$nextTick(() => {
                    this.show = true
                })
            },
        },
        computed: {
            numWidth() {
                return this.num / this.total * 100
            },
            noNumWidth() {
                return this.noNum / this.total * 100
            }
        },
        watch: {
            total(val) {
                this.handleShow()
            },
            num(val) {
                this.handleShow()
            },
            noWrok(val) {
                this.handleShow()
            },
        }
    }
</script>

<style scoped>
    .z-progress {
        position: relative;
        margin-top: 6px;
    }

    .progress-total {
        width: 100%;
        border-radius: 20px;
        background-color: #dddddd;
        height: 10px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
    }

    .Progress-num {
        height: 10px;
        border-radius: 20px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 3;
    }

    .set-border-left {
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
    }
    .set-border-right {
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
    }
    .set-border{
        border-radius: 20px
    }
</style>
